<template>
  <div class="select-tree-component">
    <div class="select-block app-el-form-item" v-bind="$attrs" @click="handleOpen">
      <template v-if="!value">
        <span class="placeholder">{{ placeholder }}</span>
      </template>
      <span>{{ value }}</span>
      <span :class="{'icon-select': true, 'open': selecting}">
        <span class="el-icon-setting" />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FormItemView',
  props: {
    value: {
      type: String,
      default: () => ''
    },
    placeholder: {
      type: String,
      default: () => '请选择'
    },
    selecting: {
      type: Boolean,
      default: () => false
    }
  },

  methods: {
    handleOpen() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
  .select-block {
    line-height: 28px;
    min-height: 28px;

    cursor: pointer;
    position: relative;

    // 右侧下拉图标
    .icon-select {
      position: absolute;
      right: 0;
      top: 0;
      width: 28px;
      color: #DCDFE6;
      text-align: center;
      transition: 0.3s transform;
      transform: rotateZ(180deg);

      &.open {
        transform: rotateZ(0deg);
      }
    }
  }
</style>
